<template>
	<view class="wrap">
		<view class="u-tabs-box">
			<u-tabs-swiper activeColor="#f29100" ref="tabs" :list="list" :current="current" @change="change"
				:is-scroll="false" swiperWidth="750"></u-tabs-swiper>
		</view>
		<scroll-view class="scrollView" scroll-y refresher-enabled :refresher-triggered="triggered" 
		@refresherrefresh="onRefresh"
		@refresherpulling="onPulling">
			<u-row :gutter="20" class="u-flex u-row-around">
				<u-col span="6" v-for="item in 20" :key="item">
					<view class="box u-m-b-20 u-p-10">
						<u-image src="/static/images/1.jpeg" border-radius="20rpx" height="400rpx"></u-image>
						<view class="title u-text-left u-line-1 u-m-t-10 u-font-30">描述描述描述描述描述描述描述描述</view>
						<view class="price u-text-left u-line-1 u-m-t-10">7000.00</view>
					</view>
				</u-col>
			</u-row>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						name: '全部'
					},
					{
						name: 'APP'
					},
					{
						name: 'HTML5'
					},
					{
						name: '网站'
					},
					{
						name: '小程序'
					}
				],
				current: 0,
				triggered: false
			};
		},
		onLoad() {},
		methods: {
			// tab栏切换
			change(index) {
				this.current = index;
			},
			onPulling(){
				this.triggered = true
			},
			onRefresh(){
				setTimeout(() => {
					this.triggered = false
				},2000)
			},
		}
	};
</script>

<style lang="scss" scoped>
	.scrollView {
		height: calc(100vh - 100rpx);
		padding: 10rpx 0;

		.box {
			background-color: #fff;
			border-radius: 20rpx;
			border: 1rpx solid #eee;
			// margin-right: 20rpx;
			box-sizing: border-box;

			.title {
				font-weight: bold;
			}

			.price {
				color: #2B85E4;
			}
		}

	}
</style>
